<template>
  <el-transfer
    filterable
    :filter-method="filterMethod"
    filter-placeholder="商品条码"
    v-model="goodsBarcode"
    :data="data"
    :titles="['选择商品','活动商品']"
    :button-texts="['取消选择','确认选择']"
    :render-content="renderFunc"
    @change="handleChange"
    style="width: auto;text-align: left">
  </el-transfer>
</template>

<script>
  import bus from "../../../bus";

    export default {
        name: "SelectTargetGoods",
      data(){
        return {
          goodsBarcode:[],
          //商品列表
          goodsList:[],
          data:[],
        }
      },
      mounted() {
          this.loadGoods();
      },
      methods:{
        //本地搜索
        filterMethod(query, item) {
          return item.key.indexOf(query) > -1;
        },
        //列表渲染
        renderFunc(h, option) {
          return <span>{ option.key } - { option.label }</span>;
        },
        //加载商品列表
        loadGoods(){
          var _this=this
          this.$axios.get('/goods').then(resp => {
            if (resp && resp.status === 200) {
              _this.goodList = resp.data
              this.generateData()
            }
          })
        },
        //数据初始化
        generateData() {
          var _this=this;
          //const data = [];
          _this.goodList.forEach((good) => {
            //console.log(JSON.stringify(good))
            _this.data.push({
              label: good.good.name,
              key:good.good.barcode,
            });

          });
          console.log(JSON.stringify(_this.data))
          //return data;
        },
        //被选中事件
        handleChange(value, direction, movedKeys) {
          //console.log(JSON.stringify(value))
          //bus.$emit('selectTargetGoods',this.goodsBarcode)
        },
      }
    }
</script>

<style scoped>

</style>
